{% extends 'CatalogCommonBundle::base.html.twig' %}
{% set modelsListLenght = oContainer.getActiveRegion.getModels|length %}

{% block breadcrumbs %}
    Выбрать регион, модель, модификацию
{% endblock breadcrumbs %}

{% block regionRuname %}{{ oContainer.getActiveRegion.getRuname }}{% endblock regionRuname %}

{% block model %}{% endblock model %}
{% block modification %}{% endblock modification %}
{% block complectation %}{% endblock complectation %}
{% block group %}{% endblock group %}
{% block subGroup %}{% endblock subGroup %}

{% block body %}
    {% block regions %}
        {% block head %}<h3>Выбрать регион:</h3>{% endblock head %}
        <ul class="nav nav-pills" role="tablist">
            {% for region in oContainer.getRegions %}
                <li role="region" class="{% if region.getCode == oContainer.getActiveRegion.getCode %}active{% endif %}" id="{{ region.getCode }}"><a href="{% block regionPath %}{{ path('', {'regionCode': region.getCode}) }}{% endblock regionPath %}">{{ region.getRuname }}</a></li>
            {% endfor %}
        </ul>
    {% endblock regions %}
    {% block models %}
        <h3>Модельный ряд:</h3>
        <div class="row">
            <div class="col-lg-6">
                <div id="result">
                    {% for model in oContainer.getActiveRegion.getModels %}
                        {% if loop.index <= (modelsListLenght/2|round + 1) %}
                            {% block halfList %}
                                    {% set modelCode = model.getCode|md5 %}
                                    <div class="model glyphicon-plus" id="{{ modelCode }}" regionCode="{{ oContainer.getActiveRegion.getCode }}">
                                        {{ model.getRuname }}
                                    </div>
                                    <div id="modifications_for_model{{ modelCode }}" class="hidden"></div>
                                {% block modificationScript %}
                                    <script>
                                        $("#{{ modelCode }}").on("click", function(){
                                            $("#modifications_for_model{{ modelCode }}").toggleClass("hidden");
                                            $(this).toggleClass("glyphicon-plus");
                                            $.ajax({
                                                type:   'POST',
                                                async:  false,
                                                url:    "{% block ajaxUrl %}{{ path('catalog_common_modifications') }}{% endblock ajaxUrl %}",
                                                data:   { regionCode: $(this).attr('regionCode'), modelCode: "{{ model.getCode }}" },
                                                success: function(data) {
                                                    $("#modifications_for_model{{ modelCode }}").html(data);
                                                }
                                            });
                                            $(this).toggleClass("glyphicon-minus");
                                        });
                                        $("#{{ modelCode }}").on("mouseover", function(){
                                            $(this).css("cursor", "pointer");
                                            $(this).addClass("btn-info");
                                        });
                                        $("#{{ modelCode }}").on("mouseout", function(){
                                            $(this).removeClass("btn-info");
                                        });
                                    </script>
                                {% endblock modificationScript %}
                            {% endblock halfList %}
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
            <div class="col-lg-6">
                <div id="result">
                    {% for model in oContainer.getActiveRegion.getModels %}
                        {% if loop.index > (modelsListLenght/2|round + 1) %}
                            {{ block('halfList') }}
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endblock models %}
{% endblock body %}
